<template>
    <div class="app-container">
        <!-- <div class="box-card">
            <el-button class="toolbar-btn" @click.native="addOrUpdate()" >新增运费设置</el-button>
        </div>
        <elTable ref="t" :formData="formData" @tableData="getList">
            <el-table-column prop="freight" label="运费" align="center" :show-overflow-tooltip="true"></el-table-column>
            <el-table-column prop="money" label="免运费下单金额" align="center"></el-table-column>
            <el-table-column label="操作" align="center" width="200">
                <template slot-scope="{row}">
                    <el-button type="primary" size="mini" @click.native="addOrUpdate(row)">修改</el-button>
                    <el-button type="danger" size="mini" @click="delFreight(row)">删除</el-button>
                </template>
            </el-table-column>
        </elTable> -->
        <search-form :searchArray="searchArray"></search-form>
        <div class="table-box">
            <div class="title">
                <el-button type="normal" @click="dialogVisible.show = true">新增店铺默认设置</el-button>
            </div>
            <elTable ref="t" :formData="formData" @tableData="getList">
                <el-table-column prop="freight" label="所属店铺" align="center" :show-overflow-tooltip="true"></el-table-column>
                <el-table-column prop="freight" label="运费" align="center" :show-overflow-tooltip="true"></el-table-column>
                <el-table-column prop="money" label="免运费下单金额" align="center"></el-table-column>
                <el-table-column prop="money" label="省" align="center"></el-table-column>
                <el-table-column prop="money" label="市" align="center"></el-table-column>
                <el-table-column prop="money" label="区" align="center"></el-table-column>
                <el-table-column prop="money" label="运费类型" align="center"></el-table-column>
                <el-table-column label="操作" align="center" width="300">
                    <template slot-scope="{row}">
                        <el-button type="text"  @click.native="addOrUpdate(row)">修改</el-button>
                        <el-button type="text"  @click="delFreight(row)">删除</el-button>
                        <el-button type="text" @click="addArea(row)">新增区域</el-button>
                    </template>
                </el-table-column>
            </elTable>
        </div>
        <!--新增 修改 弹框-->
        <dialogEditFreight ref="dialogEditFreight" :dialogVisible="dialogVisible"></dialogEditFreight>
    </div>
</template>

<script>
    import elTable from "@/components/xForm/elTable"
    import dialogEditFreight from './dialogEditFreight'
    export default {
        name: "index",
        data() {
            return {
                searchArray: [
                    {
                        type:'select',
                        placeholder: '请选择运费类型',
                        value: '',
                        label: '运费类型',
                        list: []
                    },
                ],
                formData: {
                    id: '',
                    currentPage: 1,
                    pageSize: 10
                },
                dialogVisible: {
                    show: false
                }
            }
        },
        components: {elTable, dialogEditFreight},
        methods: {
            getList(pageNo) {
                this.formData.currentPage = pageNo || this.formData.currentPage
                let dataInfo = [{
                    id: 1,
                    freight: '12',
                    money: '22'
                },{
                    id: 2,
                    freight: '14',
                    money: '33'
                }]
                let total = 12
                this.$nextTick(()=>{
                    this.$refs.t.loadData(dataInfo, total)
                })
            },
            /*新增 修改*/
            addOrUpdate(row) {
                // this.$refs.dialogEditFreight.open(row)
                this.dialogVisible.show = true
            },
            /*删除*/
            delFreight() {
            
            },
            addArea () {
            }
        }
    }
</script>

<style scoped lang="scss">
.app-container {
    .search-form {
        margin-bottom: 16px;
    }
    .table-box {
        .title {
            padding-bottom: 16px;
            text-align: right;
        }
    }

}
</style>
